<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
            ul,li{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #box{
                width: 520px;
                height: 280px;
                margin: 100px auto;
                position: relative;
            }
            #box .list li{
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
            #box .list .current{
                display: block;
            }
            #box .count{
                position: absolute;
                right: 10px;
                bottom: 10px;
            }
            #box .count li{
                float: left;
                width: 20px;
                height: 20px;
                background-color: #fa0;
                border-radius: 50%;
                text-align: center;
                color: #fff;
                opacity: 0.6;
                margin-left: 10px;
                line-height: 20px;
                cursor: pointer;
            }
            #box .count li.current{
                background-color: #f60;
                opacity: 1;
            }
            #box .list2{
                width: 64px;
                height: 32px;
                position: absolute;
                left: 10px;
                bottom: 10px;
                list-style: none;
                
            }
            #box .list2 li{
                width: 32px;
                height: 32px;
                float: left;
            }
            #box .list2 li:nth-child(1){
                background-image: url(../img/左.png)
            }
            #box .list2 li:nth-child(2){
                background-image: url(../img/右.png)
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul class="list">
                <li class="current"><img src="../img/01.jpg" alt=""></li>
                <li><img src="../img/02.jpg" alt=""></li>
                <li><img src="../img/03.jpg" alt=""></li>
                <li><img src="../img/04.jpg" alt=""></li>
                <li><img src="../img/05.jpg" alt=""></li>
            </ul> 
            <ul class="count">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <ul class="list2">
                <li id="left" class="current"></li>
                <li id="right"></li>
            </ul>
        </div>
    </body>
</html>

<script>
    var box = $('#box');
    var ali = $('.list li');
    var anum = $('.count li')
    var left = $('#left')
    var right = $('#right')
    var current = 0;
    var timer = null;

    timer = setInterval(autoplay,1000);

    function autoplay(){
        current++;
        // console.log('自动cur：'+current)
        if(current >= ali.length){
            current=0;
        }
        show(current);

    }

    // 手动图标
    anum.mouseover(function(){
        var index = $(this).index();
        // console.log('手动：'+index)
        ali.eq(index).addClass('current').siblings().removeClass();
        anum.eq(index).addClass('current').siblings().removeClass();

        current=index;
        
    })

    // 手动左右
    left.click(function(){
    console.log(current)
        current--;
        if(current<=-1){
            current=4;
        }
        show(current+1);
    })

    right.click(function(index){
         console.log(current)
        current++;
        if(current>=ali.length){
            current=0;
        }
        show(current);
    })

    // 图片的显示隐藏
    function show(){

        ali.removeClass();
        anum.removeClass();

        ali.eq(current).addClass('current')
        anum.eq(current).addClass('current')
    }

    box.mouseover(function(){
         clearInterval(timer);
    })
   
    box.mouseout(function(){
        timer=setInterval(autoplay,1000);
    })





</script>
